<template>
  <div class="login_background"></div>

  <div class="login">
    <div class="theme">
    </div>
    <Motion :delay="50">
      <div class="login_container">
        <h1>{{ title }}</h1>
        <el-form
          ref="formRef"
          :rules="formRules"
          :model="formData"
          label-width="auto">
          <Motion :delay="100">
            <el-form-item
              prop="account"
              label="账号">
              <el-input
                v-model.trim="formData.account"
                placeholder="账号"
                clearable>
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </Motion>
          <Motion :delay="150">
            <el-form-item
              prop="password"
              label="密码">
              <el-input
                v-model.trim="formData.password"
                clearable
                placeholder="密码"
                show-password>
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </Motion>
          <Motion :delay="200">
            <el-row>
              <el-col :span="18">
                <el-form-item
                  prop="verificationCode"
                  label="验证码">
                  <el-input
                    v-model.trim="formData.verificationCode"
                    placeholder="验证码"
                    clearable>
                    <template #prefix>
                      <el-icon>
                        <InfoFilled />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-image :src="url" />
              </el-col>
            </el-row>
          </Motion>
          <Motion :delay="250">
            <el-button
              class="submit"
              type="primary"
              @click="login">
              登录
            </el-button>
          </Motion>
        </el-form>
      </div>
    </Motion>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
// 动画
import Motion from "./motion";
// 提示
import message from "@/common/element-plus/message";
import { ref, nextTick, onMounted } from "vue";
// Api
import ApiSysUser from "@/api/modules/sys-user"
import { getSpecCaptcha } from "@/api/modules/spec-captcha"
// js-md5库
import md5 from "js-md5";
// hooks
import { useValidator } from "@/hooks/useValidator";
// pinia
import { useUserStore } from "@/stores/user";
import { useAppStore } from "@/stores/app";

// 组件名
defineOptions({
  name: "Login"
});
/** 路由 */
const router = useRouter()
/** store */
const userStore = useUserStore()
const appStore = useAppStore()
/** 校验 */
const { required, validate } = useValidator()
/** 表单实例 */
const formRef = ref();
/** 验证码图片地址 */
const url = ref()
/** 标题 */
const title = ref(import.meta.env.VITE_SYSTEM_NAME)
/** 表单数据 */
const formData = ref({
  account: "",//develop
  password: "",//123456qaz
  verificationCodeUuid: "a",
  verificationCode: "a"
});
/** 表单规则 */
const formRules = {
  account: [required("账号")],
  password: [required("密码")],
  verificationCode: [required("验证码")]
}

/** 登录 */
const login = async () => {
  await validate(formRef.value)
  const form = {
    ...formData.value,
    password: md5(formData.value.password)
  }
  const data = await ApiSysUser.login(form)
  if (data.code === 12001 || data.code === 11004 || data.code === 11005) {
    message.error(data.message)
    await getCaptcha()
  }
  if (!data.data) return
  message.success()
  router.push("/home")
  localStorage.setItem(data.data.tokenInfo.tokenName, data.data.tokenInfo.tokenValue)
  localStorage.setItem("tokenName", data.data.tokenInfo.tokenName)
  nextTick(() => {
    userStore.setUser(data.data.sysUser)
    userStore.setRole(data.data.sysRole)
    userStore.setToken(data.data.tokenInfo.tokenValue)
    appStore.setShowAside(true)
  })
};

/** 获取验证码 */
const getCaptcha = async () => {
  const data = await getSpecCaptcha()
  url.value = data.data.captchaBase
  formData.value.verificationCodeUuid = data.data.captchaUuid
}
getCaptcha()

onMounted(() => {
  if (navigator.userAgent.indexOf("Mobile") > 0) {
    appStore.setIsPhone(true)
  }
  if (navigator.userAgent.indexOf("Windows") > 0) {
    appStore.setIsPhone(false)
  }
})
</script>

<style lang="scss">
.el-input {
  .el-input__inner {
    text-align: start !important;
  }
}
</style>

<style lang="scss" scoped>
.login_background {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      #ff6b6b,
      #4ecdc4,
      #45b7d1,
      #96c93d);
  animation: rotate 20s linear infinite;
  z-index: -1;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
  }
}

.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .theme {
    position: absolute;
    top: 10px;
    right: 20px;
  }

  .login_container {
    width: 400px;
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;

    h1 {
      text-align: center;
      font-size: 30px;
      margin-bottom: 30px;
      background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat;
      -webkit-background-size: 50px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: rgba(0, 0, 0, 0.3);
      -webkit-animation: shine 3s infinite;
    }

    &:hover {
      transform: translateY(-5px);
    }

    .submit {
      width: 100%;
    }

    .el-image {
      margin-bottom: 10px;
    }
  }
}

/* 背景动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 文字动画 */
@-webkit-keyframes shine {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100% 100%;
  }
}
</style>
